import { maxZ } from '../__use/dom'
import { position } from '../index'

/** 弹窗关闭前触发
 * @callback onChange
 * @param {*} i - 组件实例
 * @returns {undefined | boolean | Promise<boolean>} 返回true或undefined则关闭弹出，否则阻止关闭弹窗
 */

/** ee-popup的props */
export const props = {
  /** 弹窗弹出前触发
   * @type {onChange}
   */
  onShow: Function,
  /** 弹窗关闭前触发
   * @type {onChange}
   */
  onClose: Function,
  /** 是否显示弹窗
   * @type {boolean}
   */
  modelValue: {
    type: Boolean,
    async set(value) {
      if (value) {
        if (this.onShow) {
          const result = await this.onShow(this);
          if (!(result || result == undefined))
            return;
        }
        this.zindex = maxZ();
      } else {
        if (this.onClose) {
          const result = await this.onClose(this);
          if (!(result || result == undefined))
            return;
        }
      }

      return value;
    }
  },
  /** 是否生成灰色遮罩
   * 
   * 0: 无遮罩(没有)，点击遮罩可关闭。适用场景：下拉选项
   * 
   * 1: 无遮罩(没有)，点击遮罩不可关闭。适用场景：通知，Toast
   * 
   * 2: 无遮罩(看不见)，点击遮罩可关闭。适用场景：Alert
   * 
   * 3: 无遮罩(看不见)，点击遮罩不可关闭。适用场景：对话框
   * 
   * 4: 有遮罩，点击遮罩可关闭。适用场景：一般弹窗，对话框
   * 
   * 5: 有遮罩，点击遮罩不可关闭。适用场景：加载中
   * 
   * 6: 有遮罩，遮罩不全屏，点击遮罩可关闭。适用场景：chatgpt对话按钮
   * 
   * 7: 有遮罩，遮罩不全屏，点击遮罩不可关闭。适用场景：表单提交中的提交按钮
   * 
   * none: 真没有遮罩
   * @type {('0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | 'none')}
   */
  overlay: {
    type: [Number, String],
    default: 4,
  },
  /** 遮罩的class */
  overlayClass: String,
  /** 遮罩的style */
  overlayStyle: [String, Object],
  /** @type {position | position[]} */
  position: {
    type: [String, Array],
    default: 'center',
  },
  /** 是否允许窗口滚动 
   * @type {boolean}
   */
  scrollable: Boolean,
}